<template>
<div class="ground">
  <div class="background">
  <div class="login">
  <div class="input">
    <div class="account">
      <el-input v-model="loginMessage.mail" placeholder="邮 箱" />
    </div>
    <div class="password">
      <el-input
        v-model="loginMessage.psw"
        type="password"
        placeholder="密 码"
        show-password
      />
    </div>    
  </div>
  <div class="button">
      <el-button type="primary" @click="login">登录</el-button>
      <el-button @click="registerPush">注册</el-button>
    </div> 
</div>
</div>
</div>


</template>

<script scoped>  
import request from "../utils/request";
export default {

  data() {
      return {
        loginMessage:{
          mail:"",
          psw:"",
          }, 
          userid:"",
      }
    },

    methods: {
      //跳转到注册页面
     registerPush(){
       this.$router.push("/register");
     },
     
     //登录
     login() {
       if(!this.loginMessage.mail){
         window.alert("邮箱不能为空！")
       }else if(!this.loginMessage.psw){
         window.alert("请输入密码！")
       }else{
         request.post("/login", this.loginMessage).then((res) => {
                if (res.data.code === 200) {
                    localStorage.setItem("token", res.data.token);
                    this.getMyCookie();
                    // this.$socket.emit("login",{userid:this.userid});
                    this.$router.push("/");
                    this.$socket.emit("login",{userid:this.userid});
                    console.log('登录成功')
                } else {
                  window.alert('登录失败，请检查登录信息是否输入正确！');
                }
            });
       }     
      },   

      getMyCookie(){
              let cookieString=this.getCookie("userid");
              this.userid=parseInt(cookieString);
          },

          //获取指定cookie
          getCookie(cname){        
            var name = cname + "=";        
            var ca = document.cookie.split(';');        
            for(var i=0; i<ca.length; i++){        
                var c = ca[i].trim();        
                if(c.indexOf(name)==0) return c.substring(name.length,c.length);        
            }        
            return "";        
        },  
  },


}
</script>

<style scoped>

.ground{
   height: 100vh;
   width:100%;
   display: grid;
   place-items: center;
   background-image: linear-gradient(#307496,#245580);
}

.background{
height:600px;
width:70%;
background-image:url('/img/313572.jpg');
background-size: 100% 100%;
display: grid;
place-items: center;
border-radius: 40px;
box-shadow: 20px 20px 10px #110000;
}

.login{
  height:350px;
  width:500px;
  background-color: #2c3e50;
  /* opacity:0.95; */
  display: grid;
  place-items: center;
  border: 2px solid #2c3e50;
  border-radius: 30px;
  box-shadow: 20px 20px 10px #110000;
}


.input{
height:150px;
width:350px;
margin:0 auto;

}

 .account,.password{
   margin:40px
 }

</style>
